<template>
  <div class="block" style="top: 100%;">
    <div id="chart" style="width: 1000px; height: 600px;"></div>
    <el-date-picker v-model="selectedDate" value-format="yyyy-MM-dd" @change="changeValue" type="date" placeholder="选择日期">
    </el-date-picker>
  </div>
</template>
  
<script>
import * as echarts from 'echarts';

export default {
  name: 'Chart',
  mounted() {
    this.loadChartData()
  },
  methods: {
    // 初始化图表...
    loadChartData() {
      // 从服务器获取selectedDate日期的流水表数据
      console.log(this.$request)
      this.$request.get("goods/gds/sales?time=" + this.selectedDate)
        .then((resp) => {
          console.log(resp.data)
          this.dataValue = resp.data;
          this.initChart()
        })
    },
    changeValue(value) {
      this.selectedDate = value
      this.loadChartData()
    },
    initChart() {
      const chart = echarts.init(document.getElementById('chart'))
      console.log(this.dataValue.map(s => s.count))
      const option = {
        title: {
          text: '商品单日流水图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销量']
        },
        xAxis: {
          type: 'category',
          data: this.dataValue.map(s => s.typeName)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: this.dataValue.map(s => s.count)
          }
        ]
      }

      chart.setOption(option)
    }
  },
  data() {
    return {
      pickerOptions: {
        // 快捷选项...
      },
      dataValue: {},
      value2: '',
      selectedDate: '2023-07-01' // 添加selectedDate属性
    };
  },

}


</script>